<template lang="pug">
  el-dropdown(trigger="hover")
    a.areaBtn(href="javascript: void(0)")
      | {{curPosition.roleName}}
      img(src="@/assets/caret-bottomh.png")
    el-dropdown-menu(slot="dropdown")
      el-dropdown-item(v-for="position in positions" :key="position.id" class="f13" @click.native="() => handleCommand(position)") {{position.roleName}}
  //- el-drawer(
  //-   :visible.sync="visibleDialog"
  //-   custom-class="commonDrawer"
  //-   title="切换角色"
  //-   direction="rtl"
  //-   append-to-body
  //-   destroy-on-close
  //-   modal-append-to-body
  //-   @click="$_handleCancel"
  //- )
  //-   .drawer-content
  //-     p.position(v-for="position in positions" :key="position.positionId" class="f13" @click="() => handleCommand(position)")
  //-       | {{ position.positionName }}
</template>
<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters(['positions', 'curPosition'])
  },
  methods: {
    ...mapActions({
      setStaffPosition: 'setStaffPosition'
    }),
    handleCommand (position) {
      console.log(position)
      if (position.id !== this.curPosition.id) {
        this.$store.dispatch('user/setStaffPosition', {
          roleId: position.id
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.areaBtn {
  padding: 5px 10px;
  background: rgba(255, 139, 0, 0.1);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(255, 139, 0, 0.5);
  white-space: nowrap;

  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  font-style: normal;
  text-transform: none;

  img{
    margin-left: 6px;
  }

  i {
    color: #fff
  }

  &:hover {
    background: rgba(255, 139, 0, 0.3);
  }
}
</style>
